<template>
  <div class="m-4">
    <!-- 头像信息 -->
    <div class="flex">
      <image :src="avatarUrl" class="w-20 h-20 rounded-full" mode="aspectFill" @click="handleLogin" />
      <div class="m-2 flex flex-col gap-1">
        <div class="font-bold items-center flex gap-1 ">
          <text class="w-40 truncate">
            {{ user.name }}
          </text>
          <text class="font-light bg-gray-200 p-1 rounded-md text-xs" v-if="user.status">已认证</text>
        </div>
        <div class="text-gray-500">
          <div>
            {{ user.phone }}
          </div>
          <div>
            {{ user.area }}
          </div>
        </div>
      </div>
    </div>

    <!-- 记录 -->
    <div class="my-4 flex-col flex gap-3">
      <div class="bg-gray-100 rounded-md p-4 py-3 font-bold text-xl">
        已做完 {{ user.works.filter(v => v.status === '已完成').length }} 单
      </div>
      <div class="bg-gray-100 rounded-md p-4 py-3 font-bold text-xl">
        已发布 {{ user.publishes.length }} 单
      </div>
    </div>

    <!-- 我的工作 -->
    <div>
      <div class="my-2 font-bold">我的工作</div>
      <div class="flex justify-between">
        <navigator class="flex flex-col" url="/pages/mywork/mywork?cur=0">
          <uni-icons type="list" size="30"></uni-icons>
          全部
        </navigator>
        <navigator class="flex flex-col" url="/pages/mywork/mywork?cur=1">
          <uni-icons type="info-filled" size="30"></uni-icons>
          待确认
        </navigator>
        <navigator class="flex flex-col" url="/pages/mywork/mywork?cur=2">
          <uni-icons type="flag" size="30"></uni-icons>
          进行中
        </navigator>
        <navigator class="flex flex-col" url="/pages/mywork/mywork?cur=3">
          <uni-icons type="checkbox-filled" size="30"></uni-icons>
          已完成
        </navigator>
        <navigator class="flex flex-col" url="/pages/mywork/mywork?cur=4">
          <uni-icons type="close" size="30"></uni-icons>
          已取消
        </navigator>
      </div>
    </div>

    <!-- 我的发布 -->
    <div class="mt-4">
      <div class="my-2 font-bold">我的发布</div>
      <div class="flex justify-between">
        <navigator class="flex flex-col" url="/pages/mypublish/mypublish?cur=0">
          <uni-icons type="list" size="30"></uni-icons>
          全部
        </navigator>
        <navigator class="flex flex-col" url="/pages/mypublish/mypublish?cur=1">
          <uni-icons type="info-filled" size="30"></uni-icons>
          待确认
        </navigator>
        <navigator class="flex flex-col" url="/pages/mypublish/mypublish?cur=2">
          <uni-icons type="flag" size="30"></uni-icons>
          进行中
        </navigator>
        <navigator class="flex flex-col" url="/pages/mypublish/mypublish?cur=3">
          <uni-icons type="checkbox-filled" size="30"></uni-icons>
          已完成
        </navigator>
        <navigator class="flex flex-col" url="/pages/mypublish/mypublish?cur=4">
          <uni-icons type="close" size="30"></uni-icons>
          已取消
        </navigator>
      </div>
    </div>

    <!-- 其他 -->
    <div class="my-4 mt-8 gap-4 flex flex-col">
      <navigator class="flex items-center gap-2" url="/pages/IDAuthentication/IDAuthentication" v-if="!user.status">
        <uni-icons type="person" size="30"></uni-icons>
        身份认证
      </navigator>
      <navigator class="flex items-center gap-2" url="/pages/myID/myID" v-else>
        <uni-icons type="person" size="30"></uni-icons>
        我的信息
      </navigator>
      <navigator class="flex items-center gap-2" url="/pages/feedback/feedback">
        <uni-icons type="headphones" size="30"></uni-icons>
        客户反馈
      </navigator>
    </div>
  </div>
</template>

<script setup>
import { watch, onBeforeMount, computed } from 'vue';
import { useUserStore } from '../../stores/user';
import { onShow } from '@dcloudio/uni-app';
import useLogin from '../../composables/login';

if (!uni.getStorageSync('token')) { //没登录则跳出提示
  uni.showModal({
    title: '请登录',
    success: async ({ confirm, cancel }) => {
      if (confirm) {
        await useLogin()
        await user.getUser() // getUser返回的是promise，用await等待，获取用户信息后再获取订单信息
        user.getMyPublish()
        user.getMyWorks()
      } else if (cancel) {
        uni.redirectTo({ url: '/pages/index/index' })
      }
    }
  })
}

const user = useUserStore()
onShow(async () => {
  await user.getUser() // getUser返回的是promise，用await等待，获取用户信息后再获取订单信息
  user.getMyPublish()
  user.getMyWorks()
  console.log(user.$state)
})

async function handleLogin() {
  if (uni.getStorageSync('token')) {
    uni.showToast({ title: '已经登录过了' })
    return
  }
  useLogin()
  await user.getUser()
  user.getMyPublish()
  user.getMyWorks()
}

const avatarUrl = computed(() => {
  return `${user.avatar}`
})
</script>